import React from "react";
import indexcss from "@/assets/css/index.module.less";
import homeimg from "@/assets/img/home.png";
import ren from "@/assets/img/icon1.png";
import homebg from "@/assets/img/homebg.jpeg";
import ChuRu from "@/components/IndexComp/ChuRu";
import DauDnu from "@/components/IndexComp/DauDnu";
import Tables from "@/components/IndexComp/Tables";
import { List, Tag } from "antd";
import {
  RightOutlined,
  SignalFilled,
  HomeFilled,
  AppstoreFilled,
  SettingFilled,
  CodeFilled,
  RobotFilled,
} from "@ant-design/icons";
function Index() {
  const data = [
    "黑神话·悟空现在已经在steam等平台上开始预售",
    "黑神话·悟空将在今年8月24日正式上线steam",
    "继使命召唤2023·现代战争2后将在10月份推出新版本",
    "使命召唤2024·黑色行动6开始预售,豪华版定价660",
    "黑色行动6单人剧情玩法一览,扎卡耶夫到底死了没?",
  ];
  return (
    <div className={indexcss.box}>
      <div className={indexcss.leftbox}>
        <div className={indexcss.top}>
          <div className={indexcss.events}>
            <div className={indexcss.imgs}>
              <img src={homeimg} alt="homeimg" />
            </div>
            <div className={indexcss.hd}>
              <div style={{ color: "white", fontSize: "17px" }}>
                本期活动GMX
              </div>
              <div
                style={{ color: "white", fontSize: "32px", fontWeight: "bold" }}
              >
                1523.53w
              </div>
              <hr
                style={{
                  border: "none",
                  borderBottom: "2px solid #3f78ff",
                  marginTop: "5px",
                }}
              />
              <div className={indexcss.category}>
                <div>
                  <p>类目一</p>
                  <span>53w</span>
                </div>
                <div style={{ marginLeft: "20px" }}>
                  <p>类目二</p>
                  <span>53w</span>
                </div>
                <div style={{ marginLeft: "20px" }}>
                  <p>类目三</p>
                  <span>53w</span>
                </div>
              </div>
            </div>
          </div>
          <div className={indexcss.days}>
            <div className={indexcss.daysa}>
              <div className={indexcss.tops}>
                <dl style={{ width: "100%" }}>
                  <dt
                    style={{
                      float: "left",
                      marginRight: "30px",
                      marginLeft: "20px",
                      marginTop: "10px",
                    }}
                  >
                    <img src={ren} />
                  </dt>
                  <dd style={{ marginTop: "5px" }}>
                    <div style={{ fontSize: "17px", fontWeight: "bold" }}>
                      934.7{" "}
                      <span style={{ fontSize: "14px", color: "#58bd5e" }}>
                        29.74
                      </span>
                    </div>
                    <span style={{ color: "#b2b2b2" }}>今日DAU</span>
                  </dd>
                </dl>
              </div>
              <div className={indexcss.tops}>
                <div className={indexcss.lefts}>
                  <div>24.93w</div>
                  <span style={{ color: "#b2b2b2" }}>今日DAU</span>
                </div>
                <div className={indexcss.rights}>
                  <div>984.52w</div>
                  <span style={{ color: "#b2b2b2" }}>总用户数</span>
                </div>
              </div>
            </div>
            <div className={indexcss.daysa}>
              <div className={indexcss.tops}>
                <dl style={{ width: "100%" }}>
                  <dt
                    style={{
                      float: "left",
                      marginRight: "30px",
                      marginLeft: "20px",
                      marginTop: "10px",
                    }}
                  >
                    <img src={ren} />
                  </dt>
                  <dd style={{ marginTop: "5px" }}>
                    <div style={{ fontSize: "17px", fontWeight: "bold" }}>
                      934.7{" "}
                      <span style={{ fontSize: "14px", color: "#58bd5e" }}>
                        29.74
                      </span>
                    </div>
                    <span style={{ color: "#b2b2b2" }}>今日DAU</span>
                  </dd>
                </dl>
              </div>
              <div className={indexcss.tops}>
                <div className={indexcss.lefts}>
                  <div>84.52w</div>
                  <span style={{ color: "#b2b2b2" }}>GPS</span>
                </div>
                <div className={indexcss.rights}>
                  <div>84.52w</div>
                  <span style={{ color: "#b2b2b2" }}>特权</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={indexcss.main}>
          <div className={indexcss.condition}>
            <ChuRu></ChuRu>
          </div>
          <div className={indexcss.years}>
            <DauDnu></DauDnu>
          </div>
        </div>
        <div className={indexcss.footer}>
          <Tables></Tables>
        </div>
      </div>
      <div className={indexcss.rightbox}>
        {/* 待处理  */}
        <div className={indexcss.top}>
          <div style={{ marginLeft: "10px", paddingTop: "10px" }}>待处理</div>
          <div className={indexcss.Dtop}>
            <div className={indexcss.Dtop_content}>
              <div className={indexcss.Dtop_content_div}>
                <div style={{ color: "#8a8c90" }}>申请退款</div>
                <div style={{ marginTop: "2px" }}>
                  <span style={{ color: "#0052d9", fontWeight: "bold" }}>
                    89
                  </span>{" "}
                  条
                </div>
              </div>
              <div
                style={{
                  float: "right",
                  marginTop: "20px",
                  paddingRight: "10px",
                }}
              >
                <RightOutlined />
              </div>
            </div>
            <div className={indexcss.Dtop_content}>
              <div className={indexcss.Dtop_content_div}>
                <div style={{ color: "#8a8c90" }}>申请退款</div>
                <div style={{ marginTop: "2px" }}>
                  <span style={{ color: "#0052d9", fontWeight: "bold" }}>
                    89
                  </span>{" "}
                  条
                </div>
              </div>
              <div
                style={{
                  float: "right",
                  marginTop: "20px",
                  paddingRight: "10px",
                }}
              >
                <RightOutlined />
              </div>
            </div>
          </div>
          <div className={indexcss.Dtop2}>
            <div className={indexcss.Dtop_content}>
              <div className={indexcss.Dtop_content_div}>
                <div style={{ color: "#8a8c90" }}>申请退款</div>
                <div style={{ marginTop: "2px" }}>
                  <span style={{ color: "#0052d9", fontWeight: "bold" }}>
                    89
                  </span>{" "}
                  条
                </div>
              </div>
              <div
                style={{
                  float: "right",
                  marginTop: "20px",
                  paddingRight: "10px",
                }}
              >
                <RightOutlined />
              </div>
            </div>
            <div className={indexcss.Dtop_content}>
              <div className={indexcss.Dtop_content_div}>
                <div style={{ color: "#8a8c90" }}>申请退款</div>
                <div style={{ marginTop: "2px" }}>
                  <span style={{ color: "#0052d9", fontWeight: "bold" }}>
                    89
                  </span>{" "}
                  条
                </div>
              </div>
              <div
                style={{
                  float: "right",
                  marginTop: "20px",
                  paddingRight: "10px",
                }}
              >
                <RightOutlined />
              </div>
            </div>
          </div>
        </div>
        {/* 常用功能 */}
        <div className={indexcss.main}>
          <div className={indexcss.maintitle}>常用功能</div>
          {/* 订单列表等 */}
          <div className={indexcss.lbboxs}>
            <div className={indexcss.lbbox}>
              <div className={indexcss.top1}>
                <span>
                  <SignalFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>订单列表</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
              <div className={indexcss.top1}>
                <span>
                  <HomeFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>订单列表</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
              <div className={indexcss.top1}>
                <span>
                  <AppstoreFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>订单列表</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
            </div>
            <div className={indexcss.lbbox}>
              <div className={indexcss.top1}>
                <span>
                  <RobotFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>用户列表</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
              <div className={indexcss.top1}>
                <span>
                  <CodeFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>主题配置</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
              <div className={indexcss.top1}>
                <span>
                  <SettingFilled />{" "}
                  <span style={{ marginLeft: "5px" }}>退款申请</span>
                </span>
                <span style={{ float: "right", paddingRight: "15px" }}>
                  <RightOutlined />
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className={indexcss.footer}>
          <img src={homebg} alt="" />
          <div className={indexcss.homebg_child}>
            查看更多查看更多查看更多查看更多查看更多查看更多查看更多查看更多
          </div>
        </div>

        <div className={indexcss.down}>
          <div className={indexcss.ggl}>公告栏</div>
          <div className={indexcss.list}>
            <List
              bordered={false}
              dataSource={data}
              renderItem={(item) => (
                <List.Item>
                  <span style={{ paddingLeft: "20px" }}>
                    <Tag bordered={false} color="error">
                      通知
                    </Tag>
                  </span>
                  {item}
                </List.Item>
              )}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;
